<template>
<div class="binding-page"> 
    <div class="bindingBg"></div>
    <div class="banding_box">
      <h3 class="logintilte">{{$t('login.BuildMost')}}</h3>
      <div class="banding_tab">
        <van-tabs 
          v-model="active" 
          title-active-color="rgb(51, 51, 51)"
          color="#0099FF"
          line-width="149px"
          @change="ontab"
          >
            <van-tab :title="$t('login.textEmail')">
              <div class="tab_box username">
                <input
                    type="text"
                    v-model.trim="username"
                    @focus="getacfocus"
                    @keyup="checkemail"
                    :placeholder="$t('login.enterEmail')"
                  />
              </div>
              <div v-if="accounthint" class="color_red errhint-fontred">
                {{$t('login.accounthint')}}
              </div>
              <div class="tab_box password tab_box_paw">
                <input
                    type="password"
                    ref="password"
                    v-model.trim="password"
                    @focus="getpassfocus"
                    :placeholder="$t('login.enterpassword')"
                  />
                  <span v-if="eyestatus">
                    <img
                      v-if="passwordstatus"
                      src="../../assets/image/eyes_close.png"
                      @click="seepassword"
                    />
                    <img v-else src="../../assets/image/eyes_open.png" @click="seepassword" />
                  </span>
              </div>
              <div v-if="passwordhint2" class="color_red errhint-fontred">
                {{$t('login.passwordhint2')}}
              </div>
            </van-tab>
            <van-tab :title="$t('login.textPhone')">
              <!-- 区号地址 -->
              <div class="selectcountry general_input" @click="selcetcountry">
                <input
                  placeholder="国家/地区代码"
                  readonly
                  v-model.trim="ncountryname"
                />
                <van-icon  class="iconfont icon-next fr" name="arrow" />
              </div>
              <div class="tab_box username Phone-name">
                <!-- 区号编码 -->
                <span>+</span>
                  <input
                    class="maincode"
                    v-model.trim="userPhonecode"
                    @focus="getnumfocus2"
                    name="area code"
                    placeholder="国家/地区代码"
                    oninput="if(value.length>5)value=value.slice(0,5)"
                    v-validate="'required||numeric'"
                    @blur="onCountryCode"
                  />
                <input
                    type="text"
                    v-model.trim="userPhone"
                    @focus="getnumfocus2"
                     :placeholder="$t('login.enterPhone')"
                  />
              </div>
              <div v-if="accounthint2"  class="color_red errhint-fontred">
                  {{$t('login.mobilenumber')}}
              </div>
              <div class="tab_box password tab_box_paw Phone-paw">
                <input
                    type="password"
                    ref="phonePassword"
                    v-model.trim="phonePassword"
                    @focus="getpassfocus2"
                    :placeholder="$t('login.enterpassword')"
                  />
                  <span v-if="eyestatus">
                      <img
                        v-if="passwordstatus"
                        src="../../assets/image/eyes_close.png"
                        @click="seepasswordPhone"
                      />
                      <img
                        v-else
                        src="../../assets/image/eyes_open.png"
                        @click="seepasswordPhone"
                      />
                  </span>
              </div>
              <div v-if="passwordhint2" class="color_red errhint-fontred">
                {{$t('login.passwordhint2')}}
              </div>
            </van-tab>
        </van-tabs>
        <div class="subbtn-box">
           <div class="subbtn" :class="[flagebtn?'colorbtn_blue':'colorbtn_grey']" @click="onsubbtnclick">{{$t('login.openLink')}}</div>
        </div>
        <div class="register_box">
          <span>{{$t('login.loginNew')}}</span> 
          <span class="register_btn" @click="onRegister">{{$t('login.loginRegister')}}</span>
        </div>
      </div>
    </div>
  
    <!-- 弹出层 二次进入，提示已绑定-->
    <van-popup class="Bound-popup" v-model="flageBound" :close-on-click-overlay="false">
      <div class="flageBound-box">
        <template>
            <p class="flageBound-text">{{$t('login.linkedaccount')}}{{Boundval}}</p>
        </template>
        <button class="flageBound-btn" @click="flageBound=false">{{$t('login.btn.Confirm')}}</button>
      </div>
    </van-popup>
      <!-- 另一个微信绑定，重复绑定，提示已绑定 -->
      <van-popup class="Bound-popup" v-model="flageBound2" :close-on-click-overlay="false">
      <div class="flageBound-box">
        <p class="flageBound-text">{{$t('login.linked')}}{{Mailval}} </p>
        <button class="flageBound-btn" @click="flageBound2=false">{{$t('login.btn.Confirm')}}</button>
      </div>
    </van-popup>
    <!-- 重复绑定，二维码添加客服 -->
    <div class="kefu-box" v-if="flagecode">
      <div class="menban" @click="flagecode=false"></div>
      <div class="kefu-qrcode"> 
        <img src="../../assets/image/qrcode.png" alt="">
        <p class="kefu-text">{{$t('login.WeChatQR')}}</p>
      </div>
    </div>
    <!--第二种授权 测试 -->
    <!-- <wx></wx> -->
</div>
</template>

<script>
// import wx  from "./wx.vue" // 第二种授权
import Fuse from 'fuse.js'
export default {
  // components: {wx},
  props: {},
  data() {
    return {
      active:0,
      username: '',//邮箱
      accounthint:"",//邮箱验证提示
      password: '',
      passwordhint:"",//密码验证提示
      checked:false,
      userPhonecode: "86",//手机区号，默认国内
      userPhone:"",//手机号
      accounthint2:"",//手机号验证提示
       phonePassword: "",
      passwordhint2: "",//密码验证提示
      flagebtn:false,
      Boundval:'Dov6688',//绑定账号
      flageBound:false,//已绑定提示
      flageBound2:false,//重复绑定提示
      Mailval:'sevice@buildmost.com',//重复绑定邮箱
      flagecode:false,
      eyestatus: true,
      passwordstatus: true,
      langtype:"",//语言
      userOpenid:"",//openid
      bingState:"",//提示语
      ncountryname:'',//区号
      formType: null
    };
  },
  watch: {
    // userPhonecode(val) {//区号
		// 	let falg = false;
		// 	this.CountryList.find((e, index) => {
		// 		if (this.areaCodeCountry && e.id == val && e.country_code == this.areaCodeCountry) {
		// 			this.ncountryname = this.CountryList[index].name;
		// 			falg = true;
		// 			return true
		// 		}else if (e.id == val) {
		// 			this.ncountryname = this.CountryList[index].name;
		// 			falg = true;
		// 		}
		// 	});
		// 	if (!falg) {
		// 		this.ncountryname = "";
		// 	}
		// },
    username(val) {
      if (val.length>0) {
        this.flagebtn=true
        if (val.indexOf("@") >= 0 &&/^[ a-z_A-Z0-9-\.!@#\$%\\\^&\*\)\(\+=\{\}\[\]\/",'<>~\·`\?:;|\r|\n|\\s]+$/.test(val	)) {
          this.accounthint = "";
        } else {
          this.accounthint = this.$t('login.accounthint');
        }
      }else{
        this.flagebtn=false
      }
		},
    userPhone(val) {
      if (val.length>0) {
         this.flagebtn=true
         if (/^\d+$/.test(val) && val.indexOf(".") == -1) {
            this.accounthint2 = "";
          } else {
            this.accounthint2 = this.$t('login.mobilenumber');
          }
      } else {
         this.flagebtn=false
      }
			
		},
  },
  computed: {},
  created() {},
  mounted() {
    this.init()
    this.urlinit()
    this.getpath()
  },
  methods: {
    // 获取地址栏信息，语言设置动态  "https://m.buildmost.com/#/login?open_type=en&open_id="+enOpenId + "&state=" + state;
    urlinit(){
    //    this.$router.push({
    //     path:'/binding',
    //     query:{
    //       open_type:'en',
    //       open_id:'77788',
    //       state:"0",
    //       }
    //     })
    const{open_type,open_id,state}=this.$route.query;
    this.langtype=open_type;//  设置语言
    if (this.langtype=='en') {//英文
    console.log('yyy-l');
    this.$i18n.locale = 'en';//关键语句    
    } else {
      console.log('zzz-l');
    this.$i18n.locale = 'zhCHS';//关键语句 
    }
    this.userOpenid=open_id;// 获取openid
    this.bingState=state;// 获取状态
    if (this.bingState==0) {
        this.flageBound=true
    } else if (this.bingState==1) {
         this.flageBound2=true
    }else if (this.bingState==2) {
        this.flagecode=true
    }
    },
    // 绑定接口看后台要什么
    // 获取当前是什么语言
    seepassword(){
      if (this.passwordstatus) {
            this.$refs.password.type = "text";
            this.passwordstatus = false;
        } else {
            this.$refs.password.type = "password";
            this.passwordstatus = true;
        }
    },
    seepasswordPhone() {
        if (this.passwordstatus) {
            this.$refs.phonePassword.type = "text";
            this.passwordstatus = false;
        } else {
            this.$refs.phonePassword.type = "password";
            this.passwordstatus = true;
        }
    },
    getpath(){
      //  this.$api.getMusicData().then(res=>{
      //  console.log(res.data);
      // })
    },
    init(){
      const { t, type } = this.$route.query;
      this.formType = type
      var remember = JSON.parse(this.$loc_getItem("remember")) || "";
      if (remember) {
        this.username = remember.account || "";
        this.password = remember.password || "";
        if (remember.tab) {
          this.active = remember.tab;
        }
        this.userPhone = remember.account_phone || "";
        this.phonePassword = remember.password_phone || "";
        this.userPhonecode = remember.password_phonecode || 86;
        this.checked = true
      }

    },
    ontab(e){
      // console.log(e,'username',this.username,'userPhone',this.userPhone);
      this.active=e;
      this.passwordstatus = true;
      if ( this.passwordstatus) {
        if (this.$refs.password) {
          this.$refs.password.type = "password";
        }
        if (this.$refs.phonePassword) {
          this.$refs.phonePassword.type = "password";
        }
      }
      if (this.active==0) {
        if (this.username) {
          this.flagebtn=true
        } else {
          this.flagebtn=false
        }

      }else{
         
         if (this.userPhone) {
          this.flagebtn=true
        } else {
          this.flagebtn=false
        }
 
      }

    },  
    getacfocus() {//邮箱获取焦点
			this.accounthint = "";
		},
    getpassfocus() {//邮箱密码获取焦点
			
			this.passwordhint = "";
		},
    checkemail() {//邮箱验证
			if ( this.username.indexOf("@") >= 0 && /^[ a-z_A-Z0-9-\.!@#\$%\\\^&\*\)\(\+=\{\}\[\],~\·`\?:;|\r|\n|\\s]+$/.test(this.username)) {
			} else {
				this.accounthint = "邮箱格式错误 !";
			}
		},
    getnumfocus2() {//手机号码
			this.accounthint2 = "";
		},
    getpassfocus2() {//手机密码，获取焦点
			this.passwordhint2 = "";
		},
    onsubbtnclick(){
      console.log("登录--");
      // if (!this.flagebtn) {
      //   return false
      // }
      let loginType; //登录的模式
      let account;
      let password;
      let telcode;
      if (this.active==0) {//邮箱登陆
        account = this.username;
        password = this.password;
        telcode = "";
        loginType = "byEmail";
        if (!password) {
					this.passwordhint = this.$t('login.passwordhint2');
					return;
				}
      }else{//手机登陆
        account = this.userPhone;
        password = this.phonePassword;
        telcode = this.userPhonecode;
        loginType = "byTel";
        if (!password) {
					this.passwordhint2 = this.$t('login.passwordhint2');
					return;
				}
      }
      
      let axiosdata = {
				loginName: account,//账号
				password: password,//密码
				telCountryCode: telcode,//区号
				loginType: loginType,//登陆类型
        openId:this.userOpenid,
        enOrCn:this.langtype,//语言
			};
      let loginmsg = {};
      if (this.active == 0) {
				loginmsg.account = this.username;
				loginmsg.password = this.password;
				loginmsg.tab = this.active;
			} else {
				loginmsg.tab = this.active;
				loginmsg.account_phone = this.userPhone;
				loginmsg.password_phone = this.phonePassword;
				loginmsg.password_phonecode = this.userPhonecode;
			}
      if (this.checked) {//存储账号密码
        this.$loc_setItem("remember", JSON.stringify(loginmsg));
      }else{
       this.$loc_removeItem("remember");
      }
      console.log('提交参数',axiosdata);
      this.$api.postbingLogin( axiosdata).then(res=>{
         console.log(res.data);
          this.flageBound=true
      })
    },
    onRegister(){
     location.href = "https://m.buildmost.cn/#/identities?binding";
    },
    selcetcountry(){//选择区号地址
      this.getnumfocus2();
      this.$router.push({
          path: "select_country",
          query: {
            from: "login",
            formType: this.formType
          },
        });
    },
    onCountryCode() {//区号失去焦点事件
			console.log('区号',this.userPhonecode);
			if(this.userPhonecode) {
				const options = {
					threshold: 0.0,
					keys: ['id', 'name']
				}
				console.log('ccc',this.CountryList,'opp',options);
				const fuse = new Fuse(this.CountryList, options);
				const searchLists = fuse.search(this.userPhonecode)
				console.log('searchLists',searchLists,'fuse',fuse);
				if(searchLists && searchLists.length>1) {
					if (this.ncountryname) {
						const searchLists = fuse.search(this.ncountryname)
						this.ncountryname = searchLists[0].item.name;
						this.userPhonecode = searchLists[0].item.id;
						this.areaCodeCountry = searchLists[0].item.country_code;
					}else{
						this.ncountryname = searchLists[0].item.name;
						this.userPhonecode = searchLists[0].item.id;
						this.areaCodeCountry = searchLists[0].item.country_code;
					}
				} else if (searchLists && searchLists.length == 1) {
					this.ncountryname = searchLists[0].item.name;
					this.userPhonecode = searchLists[0].item.id;
					this.areaCodeCountry = searchLists[0].item.country_code;
				} else {
					this.ncountryname = ""
					this.userPhonecode = ""
					this.areaCodeCountry = ""
				}
			}
		},
    
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/css/binding.less");
.general_input {
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6;
    font-size: 26px;
  }
  .general_input input {
    border: 0;
    width: 100%;
    padding: 0 15px;
  }
.selectcountry{
  padding: 20px 0;
	.icon-next {
		margin-top: -32px;
	}
  
}
.fr{
  float: right;
}
.Phone-name{
  display: flex;
 align-items: center;
}
.maincode {
	width: 100% !important;
	border-right: 1px solid #e6e6e6 !important;
}
.binding-page {
  .banding_box {
    .Phone-name,.Phone-paw{
      padding:0.2rem 0 ;
    }
  }
}
</style>